<template>
    <el-dialog ref="dialog" class="dialog-form" :title="title" :visible.sync="visible" :width="width" :before-close="handleCancel" destroy-on-close>
        <el-form ref="dialogForm" :model="form" size="medium" :rules="rules" @submit.native.prevent>
            <!-- label-width不要配置为'auto'，否则关闭弹框时会报错 -->
            <el-form-item v-for="item in items" :key="item.model" :label="item.label" :prop="item.model" :label-width="item.width || labelWidth">
                <el-input
                    v-if="item.type === 'input'"
                    v-model.trim="form[item.model]"
                    clearable
                    autocomplete="off"
                    placeholder="请输入"
                    maxlength="50"  
                    :show-word-limit="item.showLimit !== false"
                    @keyup.enter.native="validate"
                >
                    <span v-if="item.unit" slot="suffix" class="el-input__unit">{{ item.unit }}</span>
                </el-input>
                <el-input
                    v-if="item.type === 'textarea'"
                    v-model.trim="form[item.model]"
                    type="textarea"
                    clearable
                    placeholder="请输入"
                    :maxlength="item.maxlength"
                    :autosize="item.autosize"
                    show-word-limit
                    @keyup.enter.native="validate"
                />
                <el-select
                    v-if="item.type === 'select'"
                    v-model="form[item.model]"
                    :multiple="item.multiple"
                    clearable
                    placeholder="请选择"
                    style="width: 100%"
                >
                    <el-option v-for="m in item.options" :key="m.value" :label="m.label" :value="m.value" :disabled="m.disabled" />
                </el-select>
                <el-cascader
                    v-if="item.type === 'cascader'"
                    ref="cascader"
                    v-model="form[item.model]"
                    :options="item.options"
                    :props="props"
                    clearable
                    :show-all-levels="item.showAllLevels"
                    placeholder="请选择"
                    style="width: 100%"
                    @change="cascaderChange"
                />
                <el-date-picker
                    v-if="item.type === 'picker'"
                    ref="datePicker"
                    v-model="form[item.model]"
                    :default-value="item.defaultValue"
                    :type="item.pikerType"
                    :editable="false"
                    :value-format="item.format"
                    :popper-class="item.class"
                    :picker-options="item.pickerOptions"
                    placeholder="请选择"
                />
                <ImageUpload v-if="item.type === 'imageUpload'" ref="imageDialogUpload" :over="false"></ImageUpload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <BaseButton type="second" :throttle-time="200" @click="handleCancel">取 消</BaseButton>
            <BaseButton :loading="btnLoading" @click="validate">确 定</BaseButton>
        </div>
    </el-dialog>
</template>

<script>
import { mapState } from 'vuex'
export default {
    name: 'FormDialog',
    props: {
        width: {
            type: String,
            default: '450px'
        },
        labelWidth: {
            type: String,
            default: '90px'
        },
        title: {
            type: String,
            default: ''
        },
        items: {
            type: Array,
            default: () => []
        },
        form: {
            type: Object,
            default: () => ({})
        },
        rules: {
            type: Object,
            default: () => ({})
        },
        visible: {
            type: Boolean,
            default: false
        },
        props: {
            type: Object,
            default: () => ({
                value: 'id',
                label: 'name',
                checkStrictly: true
            })
        }
    },
    computed: {
        ...mapState(['btnLoading'])
    },
    methods: {
        show(info) {
            const form = info || {}
            this.$emit('update:form', form)
            this.$emit('update:visible', true)
            this.$nextTick(() => {
                this.$refs['dialogForm'].clearValidate()
            })
        },
        validate() {
            this.$refs['dialogForm'].validate((valid) => {
                // console.log(valid) // true
                // 图片处理
                if (this.$refs.imageDialogUpload) {
                    const imgs = this.$refs.imageDialogUpload[0].imgList
                        .map((item) => {
                            return item.response.data.objectUrl
                        })
                        .join(',')
                    if (imgs && imgs.length) {
                        this.form.handlePhotos = imgs
                    }
                }

                this.$emit('submit', valid)
            })
        },
        handleCancel() {
            this.$emit('update:visible', false)
        },
        cascaderChange(val) {
            // 三级时关闭cascader弹框
            if (val.length === 3) {
                const el = document.getElementsByClassName('el-cascader__dropdown')
                el[0].style.display = 'none'
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.dialog-form {
    ::v-deep {
        .el-input {
            width: 100%;
        }
    }
    .el-input__unit {
        display: block;
        width: 25px;
        line-height: 34px;
        text-align: center;
        color: #44444f;
    }
}
</style>
